<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-pie-chart"></i> 数据分析 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row :span="24">
                <el-col :span="12"
                    ><el-card>
                        <div class="schart-box">
                            <div class="content-title">上周馆人数统计</div>
                            <schart class="schart" canvasId="bar" :options="options1"></schart></div></el-card
                ></el-col>
                <el-col :span="12"
                    ><el-card>
                        <div class="schart-box">
                            <div class="content-title">上周热门书籍借出量</div>
                            <schart class="schart" canvasId="line" :options="options2"></schart></div></el-card
                ></el-col>
            </el-row>
            <el-row :span="24">
                <el-col :span="12"
                    ><el-card>
                        <div class="schart-box">
                            <div class="content-title">图书类型</div>
                            <schart class="schart" canvasId="pie" :options="options3"></schart></div></el-card
                ></el-col>
                <el-col :span="12"
                    ><el-card
                        ><div class="schart-box">
                            <div class="content-title">借书年级比例</div>
                            <schart class="schart" canvasId="ring" :options="options4"></schart></div></el-card
                ></el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import Schart from 'vue-schart';
export default {
    name: 'basecharts',
    components: {
        Schart
    },
    data() {
        return {
            ruguanshu:[],
            maxPeople:[],
            options1: {
                type: 'bar',
                title: {
                    text: '上周馆人数统计'
                },
                bgColor: '#fbfbfb',
                labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                datasets: [
                    {
                        label: '入馆数',
                        fillColor: 'rgba(241, 49, 74, 0.5)',
                        data: [475, 496, 469, 461, 505, 500, 470]
                    },
                    {
                        label: '馆内最多人数',
                        data: [328, 243, 317, 252, 316, 300, 280]
                    },
                    {
                        label: '人数',
                        data: [452, 476, 438, 454, 493, 456, 458]
                    }
                ]
            },
            options2: {
                type: 'line',
                title: {
                    text: '上周热门书籍借出量'
                },
                bgColor: '#fbfbfb',
                labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                datasets: [
                    {
                        label: '花千骨',
                        data: [234, 278, 270, 190, 230, 250, 180]
                    },
                    {
                        label: '追风筝的人',
                        data: [164, 178, 150, 135, 160, 180, 190]
                    },
                    {
                        label: '狼道',
                        data: [114, 138, 200, 235, 190, 200, 110]
                    }
                ]
            },
            options3: {
                type: 'pie',
                title: {
                    text: '图书类型'
                },
                legend: {
                    position: 'left'
                },
                bgColor: '#fbfbfb',
                labels: ['小说', '杂志', '哲学', '社会科学', '历史教材', '教辅', '军事'],
                datasets: [
                    {
                        data: [334, 278, 190, 235, 260, 200, 141]
                    }
                ]
            },
            options4: {
                type: 'ring',
                title: {
                    text: '借书年级比例'
                },
                showValue: false,
                legend: {
                    position: 'bottom',
                    bottom: 40
                },
                bgColor: '#fbfbfb',
                labels: ['大一', '大二', '大三', '大四'],
                datasets: [
                    {
                        data: [500, 350, 200, 100]
                    }
                ]
            }
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            axios({
                method: 'get',
                url: 'http://172.22.10.90:3000/dataList'
            }).then((res) => {
                console.log(res.data.data);

            }).catch((err)=> {
                console.log(err);
            });
        },
        
    }
};
</script>

<style scoped>
.schart-box {
    display: inline-block;
    margin: 20px;
}
.schart {
    width: 600px;
    height: 400px;
}
.content-title {
    clear: both;
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.el-row {
    margin-top: 15px;
}
</style>